<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 600px;
        height: 300px;
        border: 2px solid rgb(222, 117, 26);
        background-color: rgb(222, 117, 26);
        margin: 0 auto;
    }

    button {
        width: 140px;
        line-height: 38px;
        text-align: center;
        font-weight: bold;
        color: black;
        text-shadow: 1px 1px 1px #333;
        border-radius: 5px;
        margin: 0 10px 10px 0;
        position: relative;
        overflow: hidden;
        background-color: rgb(252, 99, 5);
    }
    @media screen and (max-width:1200px){
        .box {
        width: 90%;
        height: 250px;
        border: 2px solid rgb(222, 117, 26);
        background-color: rgb(222, 117, 26);
        margin: 100px auto;
    }
    }
</style>

<body>
    <div class="box">
        <p style="text-align: center;">恭喜你本关已通过，是否进入下一关</p>
        <center><button id="bt">返回主页</button></center></br>
        <center><button id="btn">进入下一关</button></center>
        <div id="main" style="display:none;text-align: center; "></div>
    </div>

    <script>
        //获取div，再div中显示5秒的倒计时页面跳转时间
        var div = document.getElementById('main')
        var btn = document.getElementById('btn')
        var bt = document.getElementById('bt')
        //设置倒计时
        btn.addEventListener('click', function () {
            div.style.display = ' block'
            var timer1 = setInterval(fun, [1000])

        })
        bt.addEventListener('click', function () {
            location.href = '../index.html'

        })
        var time = 5
        //首先先填入倒计时给div
        // div.innerHTML = '还剩' + time + '秒'
        div.innerHTML = time + '后进入下一关'
        function fun() {
            //每隔一秒调用该函数，time减一
            time--
            //将倒计时间给div
            div.innerHTML = time + '后进入下一关'
            //判断当time=0，时页面的URL地址改变，实现页面的跳转功能
            if (time == 0) {
                location.href = './3.html'
            }
        }
    </script>
</body>

</html>